<template>
	<view  class="category-container">
		<cu-custom bgColor="bg-white"><block slot="content">商城</block></cu-custom>
		<view class="bg-white" style="z-index: 1999;position: fixed;width: 100%;">
			<view class="cu-bar search bg-white">
				<view class="search-form round flex justify-center" @tap="InputFocus">
					<text class="cuIcon-search"></text>
					<text class="text-grey text-sm">搜索商品</text>
				</view>
			</view>
			<scroll-view class="ss-scroll-navbar" scroll-x :scroll-left="scrollLeft" scroll-with-animation="true">
				<view
				v-for="(item, index) in menuList" 
				:key="item.id" 
				class="nav-item"
				:class="{current: index === TabCur}"
				@tap="tabChange(index)"
				:id="'item-' + index"
				>
					<text class="cuIcon-cascades margin-right-xs" v-if="index+''==='0'"></text>
					<text class="title">{{item.label_name}}</text>
				</view>
			</scroll-view>
		</view>
		<view style="height: 200rpx;"></view>
		<view v-if="!productList.length" class='empty margin-top'>
		   <view style="margin-top:30rpx;text-align: center">
			   <view class="cuIcon-calendar" style="font-size: 30px;"></view>
			   <view class="text-cut text-lg margin-top-sm">暂无数据</view>
		   </view>
		</view>
		<zyflow v-else ref="zf" :flowlist="productList" @flowtap="touchcard" @flowend="flowend" ></zyflow>
	</view>
</template>

<script>
	import GoodsCard from "../component/goodsWater.vue"
	import zyflow from "../../components/zyflow/zyflow.vue";
	import * as Home_API from '../../api/home.js'
	import * as Goods_API from '../../api/goods.js'
	import ssScrollNavbar from '@/components/ss-scroll-navbar/ss-scroll-navbar.vue'
	export default {
	    components:{ GoodsCard,zyflow,ssScrollNavbar },
		data() {
			return {
				menuList:[{label_name:'全部'}],
				// menuList:[],
				productList: [],
				TabCur: 0,
				scrollLeft: 0,
				label_name:'',
				list: [],
				datalist:[],
				loading:false,
				currentIndex: 0,
				isFixed: false,
				topHeight: 0,
				operation_param:'',
				scrollLeft: 0,
				widthList: [],
				screenWidth: 0
			}
		},
		watch:{
			TabCur(newVal){
				this.checkType(parseInt(newVal))
			},
		},
		onLoad(e) {
			this.GET_MenuList()
			setTimeout(()=> {
				if(e.operation_param){
					this.menuList.map((item,index) =>{
						if(item.id === parseInt(e.operation_param)){
							// console.log('item',index )
							this.TabCur = index
							this.scrollLeft = (index) * 100
							return
						}
					}) 
				}else{
					this.checkType(0)
				}
				this.navbarTapHandler(this.TabCur)
			}, 500);
			if(e.shareUser){
				let shop = uni.getStorageSync('shop') || {}
				shop.shareU = e.shareUser
				uni.setStorageSync('shop',shop)
				uni.setStorageSync('shareUser',{'shareU':e.shareUser})
			}
			if(e.shop_name){
				let shop = uni.getStorageSync('shop') || {}
				shop.shop_name = e.shop_name
				uni.setStorageSync('shop',shop)
			}
			if(e.phone){
				uni.setStorageSync('referrer', e.phone)
			}
		},
		onPullDownRefresh() {
			setTimeout(()=> {
				uni.stopPullDownRefresh()
				this.GET_MenuList()
				this.checkType(parseInt(this.TabCur))
			}, 200);
		},
		methods:{
			onShareAppMessage() {
				let role_id = uni.getStorageSync('role').id
				let user = uni.getStorageSync('userInfo').nickname
				let phone = uni.getStorageSync('userInfo').mobile
				let shop_name = uni.getStorageSync('shop').shop_name
				let title = ''
				let path = ''
				if(role_id){
					title = user +'的' +shop_name+',快进来看看吧'
					path = '/pages/category/category?shareUser='+user+'&shop_name='+shop_name+'&phone='+phone
				}else{
					title = shop_name+'欢迎您的光临'
					path = '/pages/category/category'
				}
			    return {
					title: title,
					path: path
			    }
			},
			tabChange (index) {
				// this.$emit('navbarTap', index);
				this.navbarTapHandler(index)
				var widthArr = this.widthList;
				var scrollWidth = 0;
				for (var i = 0; i < index + 1; i++) {
					scrollWidth += widthArr[i];
				}
				let currentWidth = widthArr[index];
				// scrollView 居中算法
				// 减去固定宽度位移
				// 减去选中的bar的宽度的一半
				scrollWidth -=  this.screenWidth / 2;
				scrollWidth -= currentWidth / 2;
				this.scrollLeft = scrollWidth;
			},
			calculateItemWidth () {
				var that = this;
				var arr = [];
				let w = 0;
				this.menuList.map((item, index) =>{
					let view = uni.createSelectorQuery().in(this).select("#item-" + index);
					view.fields({
						size: true
					}, data => {
						arr.push(data.width);
					}).exec();
				})
				this.widthList = arr;
			},
			calculateWindowWidth () {
				var info = uni.getSystemInfoSync();
				this.screenWidth = info.screenWidth;
			},
			navbarTapHandler (index) {
				this.TabCur = index;
			},
			scrollChnage (e) {
				let top = e.detail.scrollTop;
				if (top >= this.topHeight) {
					this.isFixed = true;
				} else {
					this.isFixed = false;
				}
			},
			/**
			 * 计算头部视图的高度
			 */
			calculateTopSectionHeight () {
				var that = this;
				let topView = uni.createSelectorQuery().select(".top-section");
				topView.fields({
					size: true
				}, data => {
					that.topHeight = data.height;
				}).exec();
			},
			touchcard(e){
				// console.log('点击项的id为'+e)
			},
			flowend(){
				// console.log('加载完毕')
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 100
				// this.checkType(parseInt(this.TabCur))
			},
			checkType(TabCur){
				uni.showLoading()
				this.productList  = []
				if(TabCur<1){
					this.label_name = ''
					// this.GET_ProductList()
				}else{
					this.label_name = this.menuList[TabCur].label_name
					
				}
				this.GET_ProductList()
			},
			GET_ProductList(){
				let shop_id = uni.getStorageSync('shop_id') || 2
				let params = {
					shop_id : shop_id,
					label_name: this.label_name
				}
				Goods_API.goodsLableSearch(params).then(res =>{
					uni.hideLoading()
					this.productList = res
				})
			},
			GET_MenuList(){
				let shop_id = uni.getStorageSync('shop_id') || 2
				Goods_API.goodsLable(shop_id).then(res =>{
					// this.menuList=res
					res.map(item =>{
						this.menuList.push(item)
					})
				})
			},
			InputFocus(e) {
				uni.navigateTo({
					url:'../search/search'
				})
			},
		},
		created () {
			var that = this;
			this.calculateWindowWidth();
			setTimeout(function() {
				that.calculateItemWidth();
			}, 1000);
			
		}
	}
</script>

<style lang="scss" scoped>
.navAll{
	min-width: 100rpx;
} 
.navItem{
	// min-width: 200rpx;
	text-align: center;
	line-height: 50rpx;
	padding: 0 30rpx 10px;
	vertical-align: bottom;
	position: relative;
	.title{
		z-index: 999 !important;
	}
}
.navActive{
	color: $color-main;
}
.activeLine{
	width: 90rpx;
	height: 16rpx;
	border-radius: 40rpx;
	background-color: #01b193;
	position: absolute;
	top: 24rpx;
	left: 30rpx;
	z-index: 1;
	opacity: 0.7;

}
.ss-scroll-navbar {
		width: 100%;
		height: 90upx;
		box-shadow: 0 2upx 8upx rgba(0,0,0,.06);
		background-color: #fff;
		white-space:nowrap;
		
		.nav-item {
			height: 90upx;
			text-align: center;
			padding: 0upx 20upx;
			color: #303133;
			display: inline-block;
			position: relative;
			font-size: 24upx;
			
			.title {
				line-height: 90upx;
			}
			
			&:after{
				content: '';
				width: 0;
				height: 0;
				border-bottom: 4upx solid $color-main;
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				transition: .3s;
			}
		}
		
		.current{
			color: $color-main;
			font-size: 28upx;
			font-weight: 600;
			&:after{
				width: 50%;
			}
		}
	}
</style>
